<!DOCTYPE html>
<html hang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局项目</title>

    <!-- 引入bootstrap插件 -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- 引入动画库 -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 引入重写文件 重置html元素的自带的样式 -->
    <link rel="stylesheet" type="text/less" href="./assets/css/reset.less" />

    <!-- 引入自己的样式文件 -->
    <link rel="stylesheet" type="text/less" href="./assets/css/index.less" />
</head>

<body>

    <!--导航栏-->
    <!-- 反色导航条 -->
    <nav class="navbar navbar-inverse">
        <div class="container">
            <!-- 导航条左侧元素 -->
            <div class="navbar-header ">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false">data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand wow bounceInDown" href="javasciprt:void(0)">Spirit8</a>
            </div>

            <!-- 导航栏导航元素 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="wow bounceInDown" data-wow-delay="0ms" href="#banner">HOME</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="100ms" href="#about">About</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="100ms" href="#team">team</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="150ms" href="#services">SERVICES</a>
                    </li>
                    <li><a class="wow bounceInDown" data-wow-delay="100ms" href="#CLIENTS">CLIENTS</a></li>
                    <li><a class="wow bounceInDown" data-wow-delay="200ms" href="#work">work</a>
                    </li>
                    <li><a class="wow bounceInDown" data-wow-delay="250ms" href="#testimonials">testimonials</a>
                    </li>
                    <li><a class="wow bounceInDown" data-wow-delay="300ms" href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- banner -->
    <div class="banner" id="banner">
        <div class="title wow bounceInLeft">
            welcome on <span>spirit8</span>
        </div>

        <div class="subtitle wow bounceInRight">
            We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
        </div>

        <div class="more wow fadeIn">
            <a href="javascript:void(0)">↓</a>
        </div>
    </div>

    <!-- ABOUT US -->
    <div class="about" id="about">
        <div class="container">
            <!-- 左侧元素 -->
            <div class="left wow slideInLeft" data-wow-delay="100ms">
                <img src="./assets/images/about-background.png" />
            </div>

            <!-- 右侧元素 -->
            <div class="right">
                <div class="subject">
                    <div class="small wow bounceInDown" data-wow-delay="200ms">ABOUT US</div>
                    <div class="big wow bounceInDown" data-wow-delay="300ms">
                        <span>SOME</span>
                        words
                        <span>ABOUT US</span>
                    </div>

                    <!-- 右侧段落内容 -->
                    <p class="desc wow bounceInRight" data-wow-delay="380ms">We love building and rebuilding brands through our specificskills. Using colour, fonts, and illustration, we brand companies in a way they will neverforget.</p>
                    
                    <!-- 右侧列表内容 -->
                    <ul class="list">
                        <li class="wow bounceInRight" data-wow-delay="420ms">
                            <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                            <span>Mission -</span>
                            We deliver uniqueness and quality
                        </li>

                        <li class="wow bounceInRight" data-wow-delay="450ms">
                            <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                            <span>Skills -</span>
                            Delivering fast and excellent results
                        </li>

                        <li class="wow bounceInRight" data-wow-delay="480ms">
                            <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                            <span>Clients -</span>
                            Satisfied clients thanks to our experience
                        </li>
                    </ul>

                    <!-- 右侧按钮 -->
                    <div class="more wow bounceIn" data-wow-delay="510ms">
                        <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
                        <span>Browse our work</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- team -->
    <div class="team" id="team">
        <div class="container">
            <!-- 标题 -->
            <div class="title wow fadeInUp">Meet <span>Our Team</span></div>

            <!-- 列表 -->
            <div class="list">
                <div class="item wow fadeInUp" data-wow-delay="100ms">
                    <!-- 图片 -->
                    <div class="cover">
                        <img src="./assets/images/cover.png" />
                    </div>

                    <!-- 文字段落 -->
                    <div class="box">
                        <p>Van Damme</p>
                        <p>No English</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>

                <div class="item wow bounceInDown" data-wow-delay="200ms">
                    <!-- 图片 -->
                    <div class="cover">
                        <img src="./assets/images/cover.png" />
                    </div>
                    
                    <!-- 文字段落 -->
                    <div class="box">
                        <p>Van Damme</p>
                        <p>No English</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>

                <div class="item wow bounceInDown" data-wow-delay="300ms">
                    <!-- 图片 -->
                    <div class="cover">
                        <img src="./assets/images/cover.png" />
                    </div>
                    
                    <!-- 文字段落 -->
                    <div class="box">
                        <p>Van Damme</p>
                        <p>No English</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>

                <div class="item wow bounceInDown" data-wow-delay="400ms">
                    <!-- 图片 -->
                    <div class="cover">
                        <img src="./assets/images/cover.png" />
                    </div>
                    
                    <!-- 文字段落 -->
                    <div class="box">
                        <p>Van Damme</p>
                        <p>No English</p>
                        <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                    </div>
                </div>
            </div>
            
            <!-- more -->
            <div class="more">
                <span class="wow fadeInUp" data-wow-delay="500ms"></span>
                <span class="wow fadeInUp" data-wow-delay="550ms"></span>
                <span class="wow fadeInUp" data-wow-delay="600ms"></span>
            </div>
        </div>
    </div>
    <!-- team -->

    <!-- services -->
    <div class="services" id="services">
        <div class="bigbox">
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                <h1>take a look at<span> our services</span></h1>
            </div>
            <p class="wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance. The
                first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
            <div class="item">
                <div class="one">
                    <div class="image wow bounceInDown" data-wow-delay="300ms">
                        <img src="./assets/images/01.png">
                    </div>
                    <div class="font">
                        <h3 class="wow bounceInDown" data-wow-delay="400ms">Web&nbsp;design</h3>
                        <p class="wow bounceInDown" data-wow-delay="500ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <div class="one">
                    <div class="image wow bounceInDown" data-wow-delay="300ms">
                        <img src="./assets/images/02.png">
                    </div>
                    <div class="font">
                        <h3 class="wow bounceInDown" data-wow-delay="400ms">Mobile&nbsp;apps</h3>
                        <p class="wow bounceInDown" data-wow-delay="500ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <div class="one">
                    <div class="image wow bounceInDown" data-wow-delay="300ms">
                        <img src="./assets/images/03.png">
                    </div>
                    <div class="font">
                        <h3 class="wow wow bounceInDown" data-wow-delay="400ms">PHOTOGRAPHY</h3>
                        <p class="wow wow bounceInDown" data-wow-delay="500ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
                <div class="one">
                    <div class="image wow bounceInDown" data-wow-delay="300ms">
                        <img src="./assets/images/04.png">
                    </div>
                    <div class="font">
                        <h3 class="wow bounceInDown" data-wow-delay="400ms">marketing</h3>
                        <p class="wow bounceInDown" data-wow-delay="500ms">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                            1.10.32.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- services -->

    <!-- CLIENTS -->
    <div class="CLIENTS" id="CLIENTS">
        <div class="bigbox">
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                <h1>SOME OF <span>OUR CLIENTS</span></h1>
            </div>
            <div class="layer wow fadeInUp" data-wow-delay="200ms">
                <img src="./assets/images/Layer 64.png">
                <img src="./assets/images/Layer 65.png">
                <img src="./assets/images/Layer 67.png">
                <img src="./assets/images/Layer 68.png">
                <img src="./assets/images/Layer 69.png">
            </div>
            <div class="dots wow fadeInUp" data-wow-delay="300ms">
                <label class="dot"></label>
                <label class="dot"></label>
                <label class="dot"></label>
            </div>
        </div>
    </div>
    <!-- CLIENTS -->

    <!-- work -->
    <div class="work" id="work">
        <div class="bigbox">
            <div class="titlewow fadeInUp " data-wow-delay="100ms">
                <h1>take a look at <span>our work</span></h1>
            </div>
            <p class="wow fadeInUp" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and
                Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance.
                The
                first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
            <div class="item">
                <div class="list wow fadeInUp" data-wow-delay="300ms">
                    <div class="left">
                        Filter by type
                    </div>
                    <div class="right wow fadeInUp" data-wow-delay="400ms">
                        <a href="javascript:void(0)">All</a>
                        <a href="javascript:void(0)">Web design</a>
                        <a href="javascript:void(0)">Mobile design</a>
                        <a href="javascript:void(0)">Photograpy</a>
                    </div>
                    <div class="select">
                        <select name="select">
                            <option>请选择</option>
                            <option>All</option>
                            <option>Web design</option>
                            <option>Mobile design</option>
                            <option>Photograpy</option>
                        </select>
                    </div>
                </div>
                <div class="box">
                    <div class="item wow fadeInUp" data-wow-delay="200ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img.png" />
                            <div class="e1">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="300ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img.png" />
                        <div class="e1">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="400ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img.png" />
                        <div class="e1">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="500ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img.png" />
                        <div class="e1">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="600ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img2.png" />
                        <div class="e1">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="700ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img2.png" />
                        <div class="e1">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="800ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png" />
                            <div class="e1">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="900ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img2.png" />
                        <div class="e1">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="1000ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png" />
                            <div class="e1">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="1100ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img3.png" />
                        <div class="e1">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="1200ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img3.png" />
                        <div class="e1">
                            <h1>TREND AND FASHION</h1>
                            <p>Website design</p>
                            <div class="plus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="1300ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png" />
                            <div class="e1">
                                <h1>TREND AND FASHION</h1>
                                <p>Website design</p>
                                <div class="plus">+</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- work -->

    <!-- testimonials -->
    <div class="testimonials" id="testimonials">
        <div class="bigbox">
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                <h1>our clients’ <span>testimonials</span></h1>
            </div>
            <div class="layer">
                <h1 class="list wow fadeInUp" data-wow-delay="200ms">
                    This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line
                    of Lorem Ipsum,
                    "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </h1>
                <h3 class="list wow fadeInUp" data-wow-delay="300ms">Dean Martin, CEO Acme Inc.</h3>
            </div>
            <div class="dots wow fadeInUp" data-wow-delay="400ms">
                <label class="dot"></label>
                <label class="dot"></label>
                <label class="dot"></label>
            </div>
        </div>
    </div>
    <!-- testimonials -->

    <!-- contact -->
    <div class="contact" id="contact">
        <div class="bigbox">
            <div class="title wow fadeInUp" data-wow-delay="100ms">
                <h1>feel free to<span> contact us</span></h1>
            </div>
            <p class="" data-wow-delay="200ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil)
                by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
                Renaissance.</p>
            <div class="tab">
                <form name="tab" method="post">
                    <div class="top wow fadeInUp" data-wow-delay="300ms">
                        <div class="one">
                            <h5>Name<sup>*</sup></h5>
                            <div class="input">
                                <input type="text" name="username" placeholder="请输入用户名称" required />
                            </div>
                        </div>
                        <div class="one">
                            <h5>Email Address<sup>*</sup></h5>
                            <input type="text" name="username" placeholder="请输入邮箱" required>
                        </div>
                    </div>
                    <div class="bottom wow fadeInUp" data-wow-delay="400ms">
                        <div class="two">
                            <h5>Message<sup>*</sup></h5>
                            <textarea name="message" placeholder="请输入内容" required></textarea>
                        </div>
                    </div>
                    <div class="send wow fadeInUp" data-wow-delay="500ms">
                        <button class="font" data-wow-delay="500ms">SEND</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- contact -->

    <!-- foot -->
    <div class="footer" id="footer">
        <div class="contianer">
            <div class="left">
                <div class="left wow fadeInUp" data-wow-delay="300ms">
                    ALL RIGHTS RESERVED. COPYRIGHT ©
                    <span>2014 SPIRIT8</span>
                </div>
            </div>
            <div class="right">
                <div class="item">
                    <a class="wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(0)">
                        <img src="./assets/images/footer2.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="300ms" href="javascript:void(0)">
                        <img src="./assets/images/footer3.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(0)">
                        <img src="./assets/images/footer4.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(0)">
                        <img src="./assets/images/footer5.png" />
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- foot -->

    <div id="up" class="up" >
        <a href="#banner" class="op"><img src="./assets/images/top.svg"></a>
    </div>
</body>

</html>

<!-- 依赖jquery -->
<script src="./assets/js/jquery.min.js"> </script>

<!-- 引入bootstrap插件脚本 -->
<script src="./assets/js/bootstrap.min.js"> </script>

<!-- 引入less：编译css的一个插件 -->
<script src="./assets/js/less.min.js"> </script>

<!-- 引入瀑布流插件的js文件 -->
<script src="./assets/js/wow.min.js"> </script>

<!-- 实例化瀑布流插件 -->
<script>
    new WOW().init()
</script>